<template>

<div class="box">
  <button
  v-for="(tag,index) in tags"
  :key="index"
  @click="choose(index)">
  {{tag.name}}
</button>
</div>
   
</template>

<script>
import { Bus } from '../main.js'
  export default {
    data() {
      return {
        tags: [
          {id:1,name: '推荐', },
          {id:3,name: '美食',  },
          {id:4,name: '节日',  },
          {id:5,name: '旅行',  },
          {id:6,name: '情感',  },
          {id:7,name: '动漫', },
          {id:8,name: '心理', },
          {id:9,name: '校园', },
          {id:10,name: '职场',  },
          {id:11,name: '正能量', },
          {id:12,name: '搞笑', },
          {id:13,name: '悬疑', },
          {id:14,name: '写作', },
          {id:15,name: '阅读',  },
          {id:16,name: '影视', },
          {id:17,name: '音乐', },
         
          {id:19,name: '聊历史',  },
          {id:20,name: '文字', },
        
        ],
        categroy:''
      };
    },
    computed:{
   
    },
    methods:{
        choose(index){
          var i = index;
          var categroy=this.categroy;
          console.log(this.tags[i].name)
          this.categroy = this.tags[i].name
          console.log(categroy);

          Bus.$emit('moreCategroy',this.categroy)

        },
    },
    
  }
</script>

<style scoped>
.box{
    width: 100%;
    padding-left: 100px;
    padding-top: 50px;
}
 button{
     width: 80px;
     margin-right: 10px;
     margin-top: 20px;
 }
</style>